<template>
	<div class="waterfallflow" id="Flow" :style="{paddingTop:(MenuFixed?'1.3rem':'0')}">
		<header :class="['swiper','waterfallflow-swiper1' , {'menuFixed':MenuFixed}]">
			<ul class="swiper-wrapper">
				<li :class="['swiper-slide',{'default':type==item.id}]" v-for="item in menu" :key="item.id" @click="onClickMenu(item.id)">{{item.name}}</li>
			</ul>
		</header>
		<div class="item-list">
			<ul>
				<template v-for="item in list" >
					
					<!-- 商品 -->
					<li v-if="item.type==1 || item.dataDetail.type==1" :key="item.dataDetail.id">
						<router-link to="/">
							<div :style="'background: #f4fff7 no-repeat center center/cover;background-image: url('+getImg(item.dataDetail.image)+');height: 3.4rem;'"></div>
							<template v-if="item.dataDetail.placeLabel">
								<span class="placeLabel">{{item.dataDetail.placeLabel}}</span>
							</template>
							<label>{{item.dataDetail.title}}</label>
							<p>{{item.dataDetail.productType}}.{{item.dataDetail.productCat}}.{{item.dataDetail.days}}</p>
							<article>
								<template v-if="item.dataDetail.priceLabel>0">
									<span>￥<b>{{item.dataDetail.priceLabel}}</b>起</span>
								</template>
								<template v-else>
									<span>{{item.dataDetail.priceLabel}}</span>
								</template>
								<strong>{{item.dataDetail.numLabel}}</strong>
							</article>
						</router-link>
					</li>
					
					<!-- 文字居中 -->
					<li v-else-if="item.type==3 || item.dataDetail.type==3" :key="item.dataDetail.id">
						<router-link to="/">
							<div :style="'background: #f4fff7 no-repeat center center/cover;background-image: url('+getImg(item.dataDetail.image)+');height: 4.5rem;'"></div>
							<div class="item-type3">
								<label>{{item.dataDetail.title}}</label>
								<p style="padding-bottom: 0.4rem;color: white;">{{item.dataDetail.subTitle}}</p>
							</div>
						</router-link>
					</li>
					
					<!-- 霞魁游记 -->
					<li v-else-if="item.type==5 || item.dataDetail.type==5" :key="item.dataDetail.id">
						<router-link to="/">
							<div :style="'background: #f4fff7 no-repeat center center/cover;background-image: url('+getImg(item.dataDetail.image)+');height: 4.5rem;'"></div>
							<div class="item-type5">
								<img class="ico" src="../../../assets/img/travel.d1dd2034.png">
								<label>{{item.dataDetail.title}}</label>
								<div class="item-info">
									<section>
										<img class="user-img" :src="item.dataDetail.avatar" >
										<img class="user-img-v" src="../../../assets/img/travelUser.98d7ca63.png">
										<span>{{item.dataDetail.username}}</span>
									</section>
									<p>{{item.dataDetail.numLabel}}</p>
								</div>
							</div>
						</router-link>
					</li>
					
					<!-- 攻略 -->
					<li v-else-if="item.type==6 || item.dataDetail.type==6" :key="item.dataDetail.id">
						<router-link to="/">
							<div :style="'background: #f4fff7 no-repeat center center/cover;background-image: url('+getImg(item.dataDetail.image)+');height: 4.5rem;'"></div>
							<div class="item-type6">
								<i>攻略</i>
								<label>{{item.dataDetail.title}}</label>
								<p>{{item.dataDetail.numLabel}}</p>
							</div>
						</router-link>
					</li>
					
					<!-- 去旅行 -->
					<li v-else-if="item.type==7 || item.dataDetail.type==7" :key="item.dataDetail.id">
						<router-link to="/">
							<div :style="'background: #f4fff7 no-repeat center center/cover;background-image: url('+getImg(item.dataDetail.image)+');height: 4.5rem;'"></div>
							<div class="type7">
								<label>{{item.dataDetail.title}}</label>
								<img src="../../../assets/img/travel_icon.fa630116.png" >
							</div>
							<p class="type7-text">{{item.dataDetail.numLabel}}</p>
						</router-link>
					</li>
					
					<!-- TYPE10 -->
					<li v-else-if="item.type==10 || item.dataDetail.type==10" :key="item.dataDetail.id">
						<router-link to="/">
							<img :src="getImg(item.dataDetail.image)">
							<div class="item-type10" :style="'background-image: url('+getImg(item.dataDetail.typeImage)+');'">
								{{item.dataDetail.title}}
							</div>
						</router-link>
					</li>
					
					<!-- 其他 -->
					<li v-else :key="item.dataDetail.id">
						<router-link to="/">
							<img :src="getImg(item.dataDetail.image)">
							<template v-if="item.dataDetail.placeLabel">
								<span class="placeLabel">{{item.dataDetail.placeLabel}}</span>
								
								<label>{{item.dataDetail.title}}</label>
							</template>
						</router-link>
					</li>
					
				</template>
			</ul>
		</div>
	</div>
</template>

<script>
import {onMounted} from 'vue';
import Swiper from 'swiper';

export default{
	name:'WaterfallFlow',
	data(){
		return {
			menu:[
				{id:1,name:"全球经典"},
				{id:402,name:"户外"},
				{id:404,name:"亲子"},
				{id:403,name:"摄影"},
				{id:537,name:"人文"},
				{id:509,name:"房车"},
				{id:526,name:"海岛"},
				{id:527,name:"露营"},
				{id:525,name:"自驾"},
				{id:506,name:"越野派"},
				{id:406,name:"同城"},
				{id:510,name:"骑行"},
				{id:407,name:"赛事"},
				{id:538,name:"赏秋"}
			],
			type:1,//
			page:0,
			totalPage:1,//总页数
			left_list:[],
			right_list:[],
			list:[],
			MenuFixed:false,
			Flow_offsetTop:0,//列表组件距离页面顶部的距离
			ViewHeight:0,//页面高度,
			loadData:false,//是否正在加载数据,
		}
	},
	methods:{
		onClickMenu(id){
			if(id!=this.type){
				this.type=id;
				this.page = 0;
				this.totalPage = 1;
				this.left_list = [];
				this.right_list = [];
				this.getImgList();
			}
		},
		getImgList(){
			//当前页数与数据总页数大于或一致时不在获取新数据
			if(this.page>=this.totalPage)return false;
			let url = 'https://m.youxiake.com/api/m/index/flow/recommend?sitecode=1&city_id=1&type='+this.type+'&page='+(++this.page);
			// let url = 'api/recommend.json';
			this.axios.get(url).then((res)=>{
				if(res.status == 200){
					this.totalPage = res.data.data.totalPage;
					let data_list = res.data.data.list;
					let newList = [];
					//数据重新排列
					data_list.forEach((item,index)=>{
						if(index%2==0)this.left_list.push(item);
					})
					data_list.forEach((item,index2)=>{
						if(index2%2!=0)this.right_list.push(item);
					})
					newList = newList.concat(this.left_list);
					newList = newList.concat(this.right_list);
					this.list = newList;
					if(this.page==1 && this.MenuFixed){
						//选择新类型并且加载第一页时滚动条滚动该列表的顶部
						document.documentElement.scrollTop = this.Flow_offsetTop;
					}
					this.loadData = false;
				}
			})
		},
		flexMenus(){
			//window.pageYOffset:当前区域距离窗口左上角的纵向坐标
			//document.documentElement.scrollTop：当前滚动条的坐标
			//console.log(window.pageYOffset);
			//Flow.offsetTop:取div在距离页面顶部的距离
			// console.log(document.documentElement.scrollTop);
			let sTop = window.pageYOffset || document.documentElement.scrollTop;
			sTop > this.Flow_offsetTop ? this.MenuFixed=true : this.MenuFixed=false;
			   // console.log("当前位置",sTop,this.ViewHeight);
			//滑动到首页底部列表
			if(this.MenuFixed && sTop>=this.ViewHeight && this.ViewHeight>0 && !this.loadData){
				// console.log("到底部了",sTop,this.ViewHeight);
				this.getImgList();
				this.loadData = true;
			}
			/*下滑刷新：
				1.获取当前滚动条的位置以及当前网页的高度+设备高度
				2.监听滚动事件：高度的获取，以及如果到底部，发起一个新的异步请求
				3.异步函数内：默认发起第一页的请求page=1，页码就需要自增+1，当滚动事件达到底部后，发起page的请求数据
			*/
		},
		getImg(url){
			if(url){
				return 'https://images.weserv.nl/?url='+url;
			}else{
				return '';
			}
		}
	},
	mounted() {
		//将获取到的距离顶部高度赋值到data
		
		new Swiper('.waterfallflow-swiper1', {
			// loop:true,
			freeMode: true,
			slidesPerView: 6,
			slideToClickedSlide: true,//点击居中
			centeredSlides : true,//默认居中
			centeredSlidesBounds:true,//默认贴边
		});
		
		this.getImgList();
		this.flexMenus();
		
		let timer;
		let flag = true;//判断是否打开滚动监听
		window.addEventListener('scroll',()=>{
			//设置定时器
			if(flag)this.flexMenus();
			//关闭开关
			flag = false;
			//清除定时器
			clearTimeout(timer);
			//设置定时器，每隔15毫秒，打开一次开关
			timer = setTimeout( ()=>{ flag = true } , 15);
		} , true);
		
	},
	updated() {
		this.Flow_offsetTop = Flow.offsetTop;
		// console.log("距离高度",this.Flow_offsetTop);
		
		this.ViewHeight = Flow.offsetHeight;
		// console.log("数据高度",this.ViewHeight);
	}
}
</script>

<style scoped>
a{
	text-decoration: none;
	color: black;
}
.waterfallflow{
	width: 100%;
	background-color: #f1f1f1;
	padding-bottom: 1rem;
	position: relative;
}
.waterfallflow header{
	width: 100%;
	margin-bottom: 0.1rem;
	background-color: white;
}
.waterfallflow .menuFixed{
	position: fixed;
	top: 0;
}
.waterfallflow header ul li{
	text-align: center;
	font-family: "microsoft yahei";
	line-height: 1rem;
	overflow: hidden;
	font-size: 0.35rem;
}
.waterfallflow header ul .default{
	font-size: 0.39rem;
	font-weight: bold;
	background: url(../../../assets/img/index_nav_a.f046aa77.png) no-repeat 0.25rem 0.1rem;
	background-size: 70% 100%;
}

.waterfallflow .item-list ul{
	width: 95%;
	margin: 0 auto;
	column-count: 2;
	overflow: hidden;
}
.waterfallflow .item-list ul li{
	width: 100%;
	border-radius: 0.2rem;
	margin-bottom: 0.2rem;
	background-color: white;
	overflow: hidden;
	position: relative;
	page-break-inside:avoid;
	-webkit-column-break-inside: avoid;
}
.waterfallflow .item-list li img{
	width: 100%;
}
.waterfallflow .item-list ul li .placeLabel{
	position: absolute;
	top: 0;
	left: 0;
	color: white;
	padding: 0.12rem 0.3rem;
	background: rgba(0,0,0,0.5);
	border-radius: 0 0 0.15rem 0;
}
.waterfallflow .item-list ul li label{
	width: 92%;
	margin: 0.15rem auto 0;
	font-size: 0.36rem;
	font-weight: bold;
	line-height: 0.4rem;
	height: 0.8rem;
	overflow: hidden;
	display: -webkit-box;/* 转换为盒子 */
	-webkit-line-clamp: 2;/* 跟高度有关 */
	-webkit-box-orient: vertical;/* 超出盒子外的文本用省略号代替 */
}

.item-list ul li .type7{
	width: 90%;
	padding-top: 0.1rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.item-list ul li .type7 img{
	width: 1.7rem;
	transform: translateY(-0.6rem);
}
.type7-text{
	text-indent: 0.3rem;
	padding-bottom: 0.1rem;
}
.item-list ul li p{
	color: #818181;
	line-height: 0.4rem;
	text-indent: 0.2rem;
}
.item-list ul li article{
	line-height: 1rem;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.item-list ul li article span{
	color: #ff7100;
}
.item-list ul li article b{
	font-weight: bold;
	font-size: 0.4rem;
}
.item-list ul li article strong{
	color: #818181;
}
.item-list ul li .item-type5 label{
	padding-top: 0.25rem;
}
.item-list ul li .item-type5 .ico{
	position: absolute;
	width: 2rem;
	transform: translateY(-0.4rem);
	padding-left: 0.2rem;
}
.item-list ul li .item-type5 .user-img-v{
	position: absolute;
	width: 0.3rem;
	transform: translate(0.4rem,0.25rem);
}
.item-list ul li .item-type5 .item-info{
	width: 90%;
	margin: 0 auto;
	padding-bottom: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item-list ul li .item-type5 .item-info section{
	display: flex;
	align-items: center;
}
.item-list ul li .item-type5 .user-img{
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	margin-right: 0.1rem;
}
.item-list ul li .item-type6 i{
	display: inline-block;
	background-color: #fed101;
	padding: 0.05rem 0.15rem;
	position: absolute;
	font-weight: bold;
	border-radius: 0.1rem;
	transform: translate(0.25rem,-0.35rem);
}
.item-list ul li .item-type6 label{
	padding-top: 0.3rem;
	font-size: 0.38rem;
	line-height: 0.45rem;
	height: 0.9rem;
}
.item-list ul li .item-type6 p{
	line-height: 0.8rem;
	color: black;
}
.item-list ul li .item-type3{
	padding-top: 0.01rem;
	text-align: center;
	color: white;
	background-image: url(../../../assets/img/zt.5ca275cd.png);
}
.item-list ul li .item-type10{
	background-size: cover;
	position: absolute;
	width: 2.2rem;
	height: 0.7rem;
	left: 1.2rem;
	bottom: 1.3rem;
	color: white;
	font-size: 0.35rem;
	font-weight: bold;
	text-indent: 0.8rem;
	line-height: 0.7rem;
}
</style>
